<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结账</title>
    <style>
        body {
            width: 600px;
            margin:0 auto;
        }

        /*#div0 {*/
        /*    display: flex;*/
        /*    flex-direction: column;*/
        /*    justify-content: center;*/
        /*}*/
    </style>
</head>
<body>

    <div id="div0">
        <button onclick="check()">付款</button>
        <div id="timer" style="color:red"></div>
    </div>

    <script type="text/javascript">

        function check() {
            var httpRequest = new XMLHttpRequest();
            httpRequest.open('POST', 'http://localhost:8080/check?orderId=1', true);
            httpRequest.send();
            /**
             * 获取数据后的处理程序
             */
            httpRequest.onreadystatechange = function () {
                if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                    var json = httpRequest.responseText;//获取到json字符串，还需解析

                    console.log(json);

                    var count = 5;

                    var CountDown = function () {
                        if (count >= 0) {
                            msg = "正在支付中，还剩" + count + "秒，" + "请稍后!";
                            document.getElementById("timer").innerText = msg;
                            --count;
                        } else {
                            clearInterval(timer);
                            window.location.href = 'http://localhost:8080/result?orderId=1';
                        }
                    }

                    timer = setInterval(CountDown, 1000);
                }
            };
        }

    </script>
</body>
</html>